import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, StatusBar, ScrollView, TouchableOpacity, Alert } from 'react-native';

const B = ({children,style,...rest}) => {
  return (
    <TouchableOpacity {...rest} style={[style,{borderRadius:5,alignItems:'center',justifyContent:'center'},]}>
      <Text style={{color:style.color?style.color:'#fff'}}>{children}</Text>
    </TouchableOpacity>
  )
}

const tagData = [
  {label:'综合新闻',id:'1'},
  {label:'通知公告',id:'2'},
  {label:'媒体聚焦',id:'3'},
  {label:'教学科研',id:'4'},
  {label:'基层动态',id:'5'}
]

export default App = () => {
  const [tag,setTag] = useState('1');

  useEffect(() => {

  },[])

  const onPress = () => {
    Alert.alert('title','sjkjfskljfklsda',[{text:'fhskj',onPress:()=>{console.log('dsd')}},{text:'fsddf',onPress:()=>{console.log('ddfsgfdd')}}])
  }
  
  return (
    <View style={styles.layout}>
      <ScrollView>
        <B 
        onPress={onPress}
        style={{
          width:200,
          height:50,
          color:'#00f',
          backgroundColor:'#7e7c00'
        }}
        
        >test</B>

        <View style={{flexDirection:'row',justifyContent:'space-around',marginVertical:20,}}>
          {
            tagData.map(item => {
              return <B style={{width:'18%',height:20,color:'#000',backgroundColor:tag === item.id?'#f00':'#ccc'}} onPress={() => setTag(item.id)} key={item.id}>{item.label}</B>
            })
          }
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  layout:{
    padding:20
  }

});
